<!-- 新建设备基本体和管口工具条 -->
<template>
	<transition name="el-zoom-in-center">
		<div>
		<div class="position_ab" v-if="showTool">
			<div class="toolBar-container">

				
				<ul class="toolBar" v-show="equipInfo.installation_mode == '鞍座' ? true : false">
					<li v-if="store.activeNameStore !== '管口'" v-for="bar in HEquipToolBar" :key="bar.index" @click="createShape(shapeInfo[bar.name])">
						<el-tooltip effect="dark" :content="shapeInfo[bar.name].name" placement="right-start">
							<el-image style="width: 36px; height: 36px" :src="bar.url" fit="contain" />
						</el-tooltip>
					</li>
					<li v-if="store.activeNameStore == '管口'" @click="createNozzle">
						<el-tooltip effect="dark" content="设备管口" placement="right-start">
							<el-image style="width: 36px; height: 36px" :src="nozzleImgUrl" fit="contain" />
						</el-tooltip>
					</li>
				</ul>

				<ul class="toolBar" v-show="equipInfo.installation_mode !== '鞍座' ? true : false">
					<li v-if="store.activeNameStore !== '管口'" v-for="bar in VEquipToolBar" :key="bar.index" @click="createShape(shapeInfo[bar.name])">
						<el-tooltip effect="dark" :content="shapeInfo[bar.name].name" placement="right-start">
							<el-image style="width: 36px; height: 36px" :src="bar.url" fit="contain" />
						</el-tooltip>
					</li>
					<li v-if="store.activeNameStore == '管口'" @click="createNozzle">
						<el-tooltip effect="dark" content="设备管口" placement="right-start">
							<el-image style="width: 36px; height: 36px" :src="nozzleImgUrl" fit="contain" />
						</el-tooltip>
					</li>
				</ul>

			

				<!-- 新建基本体对话框 -->
				<el-dialog :title="`${equipInfo.equip_class}-${createShapeType}`" v-model="shapeDialogVisible" :close-on-click-modal="false" width="28%">
					<el-form size="small" :model="newPrimitivesData">
						<el-form-item v-for="item in dialogParaLabels" :key="item.label" :label="item.label" label-width="180px">
							<el-select
								:placeholder="`请选择${item.label}`"
								style="width: 100%"
								size="small"
								v-if="item.hasOwnProperty('elSelect')"
								v-model="newPrimitivesData[item.prop]"
								clearable
								filterable>
								<el-option v-for="item in liftingLegTypes" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
							
							<el-input v-else :placeholder="`请输入数字`" v-model="newPrimitivesData[item.prop]" size="small" />
						
						</el-form-item>
						
						<el-form-item v-if='createShapeType === "鞍座"' label-width="180px">
							
							<el-checkbox-group  v-model="is_saddle_fixed_list">
    <el-checkbox :disabled='is_saddle_fixed_list.includes("右端固定")'  label="左端固定" value="左端固定" />
    <el-checkbox :disabled='is_saddle_fixed_list.includes("左端固定")'  label="右端固定" value="右端固定" />
    
  </el-checkbox-group>
						</el-form-item>

						<el-form-item label="保温/涂漆和防火" label-width="180px">
							
							<el-checkbox-group v-model="checkList">
    <el-checkbox label="保温/涂漆" value="保温/涂漆" />
    <el-checkbox label="防火" value="is_fireproof" />
    
  </el-checkbox-group>
						</el-form-item>
						<div class="button_footer">
							<el-button @click="shapeDialogVisible = false">取消</el-button>
							&nbsp;&nbsp;&nbsp;
							<el-button type="primary" @click="createShapeApply">确认</el-button>
						</div>
					</el-form>
				</el-dialog>

				<!-- 新建管口对话框 -->
				<el-dialog size="small" :title="`${equipInfo.equip_class}-管口`" v-model="nozzleDialogVisible" :close-on-click-modal="false" width="28%">
					<el-form size="small" :model="newNozzleData" label-position="right" label-width="150px">
					
						<!-- 管口名称 -->
						<el-form-item label="管口名称：">
							<el-input size="small" placeholder="请选择管口名称" v-model="newNozzleData.nozzle_name" style="width: 100%" />
						</el-form-item>

						<!-- 管口尺寸 -->
						<el-form-item label="管口尺寸：">
							<el-select size="small" style="width: 100%" v-model="newNozzleData.nozzle_npd" filterable>
								<el-option v-for="(npd, index) in nozzleInfo.nozzleNpd" :key="index" :label="npd.label" :value="npd.value" />
							</el-select>
						</el-form-item>

						<!-- 法兰磅级 -->
						<el-form-item label="法兰磅级：">
							<el-select size="small" style="width: 100%" v-model="newNozzleData.nozzle_rating" filterable>
								<el-option v-for="(press, index) in nozzleInfo.nozzleRating" :key="index" :label="press.label" :value="press.value" />
							</el-select>
						</el-form-item>

						<!-- 法兰标准 -->
						<el-form-item label="法兰标准：">
							<el-select size="small" style="width: 100%" v-model="newNozzleData.nozzle_standard" filterable>
								<el-option v-for="(standard, index) in nozzleInfo.nozzleStandard" :key="index" :label="standard.label" :value="standard.value" />
							</el-select>
						</el-form-item>

						<!-- 法兰密封面 -->
						<el-form-item label="法兰密封面：" label-width="150px">
							<el-select size="small" style="width: 100%" v-model="newNozzleData.nozzle_preparation" filterable>
								<el-option v-for="(preparation, index) in nozzleInfo.nozzlePreparation" :key="index" :label="preparation.label" :value="preparation.value" />
							</el-select>
						</el-form-item>

						<!-- 开孔位置 -->
						<el-form-item label="开孔位置：">
							<el-select
								size="small"
								style="width: 100%"
								v-if="equipInfo.installation_mode == '鞍座'"
								v-model="newNozzleData.nozzle_location"
								@visible-change="nozzleLocationChange">
								<el-option v-for="(location, index) in nozzleInfo.nozzleLocation1" :key="index" :value="location" />
							</el-select>

							<el-select
								size="small"
								style="width: 100%"
								v-if="equipInfo.installation_mode !== '鞍座'"
								v-model="newNozzleData.nozzle_location"
								@visible-change="nozzleLocationChange">
								<el-option v-for="(location, index) in nozzleInfo.nozzleLocation" :key="index" :value="location" />
							</el-select>
						</el-form-item>

						<el-form-item>
							<div class="button_footer">
								<el-button @click="nozzleDialogVisible = false">取消</el-button>
								&nbsp;&nbsp;&nbsp;
								<el-button type="primary" @click="createNozzleApply">确认</el-button>
							</div>
						</el-form-item>
					</el-form>

					<!-- 开孔位置嵌套对话框 -->
					<el-dialog width="30%" :title="`${newNozzleData.nozzle_location}处的管口`" v-model="innerVisible" :close-on-click-modal="false" append-to-body>
						<el-form label-width="180px" size="small" :model="newNozzleData">
							<!-- 左/右封头 -->
							<template
								v-if="
									newNozzleData.nozzle_location === '左封头' ||
									newNozzleData.nozzle_location === '右封头' ||
									newNozzleData.nozzle_location === '上封头' ||
									newNozzleData.nozzle_location === '下封头'
								">
								<el-form-item v-for="(item, index) in nozzleInfo.nozzleLocationType.EHA.labels" :key="index" :label="item.label">
									<el-input size="small" v-model="newNozzleData[item.prop]" />
								</el-form-item>
							</template>

							<!-- 筒体 -->
							<template v-else-if="newNozzleData.nozzle_location === '筒体'">
								<el-form-item v-for="(item, index) in nozzleInfo.nozzleLocationType.Cylinder.labels" :key="index" :label="item.label">
									<el-input size="small" v-model="newNozzleData[item.prop]" />
								</el-form-item>
							</template>

							<!-- 锥壳 -->
							<template v-else-if="newNozzleData.nozzle_location === '锥壳'">
								<el-form-item v-for="(item, index) in nozzleInfo.nozzleLocationType.Shell.labels" :key="index" :label="item.label">
									<el-input size="small" v-model="newNozzleData[item.prop]" />
								</el-form-item>
							</template>

							<el-form-item>
								<div class="button_footer">
									<el-button @click="createNozzleInnerCancel">取消</el-button>
									&nbsp;&nbsp;&nbsp;
									<el-button type="primary" @click="innerVisible = false">确认</el-button>
								</div>
							</el-form-item>
						</el-form>
					</el-dialog>
				</el-dialog>
			</div>
		</div>
		<div v-if="!showTool" style="width: 50px;height:20px"></div>
	</div>
		
	</transition>
</template>

<script setup>
	import {HEquipShapeTypes, VEquipShapeTypes, ShapeParams, NozzleParamOptions, LiftingLegTypeOptions} from '/@/assets/js/equiipentBaseDatas'
	import nozzleImgUrl from '/@/assets/img/管口.jpg'

	import {ref, reactive, toRefs, onMounted, watch} from 'vue'

	import {ElMessageBox} from 'element-plus'
	import {useEquipmentStore} from '../../../stores/equipment'

	let store = useEquipmentStore()
	const props = defineProps(['equip_oid'])

	let createNozzleInnerCancel = () => {
		newNozzleData.value.parameter_6 = ''
		newNozzleData.value.parameter_7 = ''
		newNozzleData.value.parameter_8 = ''
		newNozzleData.value.parameter_9 = ''
		newNozzleData.value.parameter_10 = ''
		newNozzleData.value.parameter_11 = ''
		innerVisible.value = false
	}

	let createNozzleApply = () => {
		nozzleDialogVisible.value = false
		newNozzleData.value.nozzle_unit = 'mm'
		store.newNozzleDataStore = newNozzleData.value
	}

   let is_saddle_fixed_list = ref([])

  
	let checkList = ref([])

	let nozzleLocationChange = (e) => {
      
		if(!e){
			setTimeout(()=>{
			let nozzleLocation = newNozzleData.value.nozzle_location
		let type = ''
		if (nozzleLocation.includes('封头')) {
			type = 'EHA'
		} else if (nozzleLocation === '筒体') {
			type = 'Cylinder'
		} else if (nozzleLocation === '锥壳') {
			type = 'Shell'
		}
		const nozzleRequireParams = nozzleInfo.nozzleLocationType[type].nozzleRequireParams
       
	
          
        if(newNozzleData.value.parameter_6||newNozzleData.value.parameter_7
			||newNozzleData.value.parameter_8||newNozzleData.value.parameter_9
			||newNozzleData.value.parameter_10 || newNozzleData.value.parameter_11){

		
		}else{
			for (const key in nozzleRequireParams) {
				if(nozzleRequireParams[key] == '-'){
					newNozzleData.value[key] = ''
				}else{
					newNozzleData.value[key] = nozzleRequireParams[key]
				}
			
		}
		}
		

		
		innerVisible.value = true
		},100)
		}
	
	
		
	}

	let createNozzle = () => {
		newNozzleData.value = {
		nozzle_name: '',
		nozzle_npd: '',
		nozzle_unit: '',
		nozzle_rating: '',
		nozzle_standard: '',
		nozzle_preparation: '',
		nozzle_location: '',
		parameter_6: '',
		parameter_7: '',
		parameter_8: '',
		parameter_9: '',
		parameter_10: '',
		parameter_11: '',
	}
		nozzleDialogVisible.value = true
	}

	let is_saddle_fixed = ref(0)
	let createShapeApply = () => {
		is_saddle_fixed_list.value = []
		shapeDialogVisible.value = false
		if(checkList.value.includes('保温/涂漆')){
			newPrimitivesData.value.is_painted = "true"
		}else{
			newPrimitivesData.value.is_painted = "false"
		}

		if(checkList.value.includes('防火')){
			newPrimitivesData.value.is_fireproof = "true"
		}else{
			newPrimitivesData.value.is_fireproof = "false"
		}

      if(is_saddle_fixed_list.value.includes('左端固定')){
		newPrimitivesData.value.is_saddle_fixed = 1
	  }else if(is_saddle_fixed_list.value.includes('右端固定')){
		newPrimitivesData.value.is_saddle_fixed = 2
	  }else{
		newPrimitivesData.value.is_saddle_fixed = 0
	  }


		
	    console.log(newPrimitivesData.value)
		store.newPrimitivesDataStore = newPrimitivesData.value
	}

	let HEquipToolBar = reactive(HEquipShapeTypes) // 配置卧式设备基本体可用类型
	let VEquipToolBar = reactive(VEquipShapeTypes) // 配置立式设备基本体可用类型
	let shapeInfo = reactive(ShapeParams) // 各类基本体信息
	let nozzleInfo = reactive(NozzleParamOptions)
	let liftingLegTypes = reactive(LiftingLegTypeOptions)

	let shapeDialogVisible = ref(false)
	let nozzleDialogVisible = ref(false)
	let isShowToolBar = ref(false)
	let innerVisible = ref(false)
	let dialogParaLabels = ref([])
	let createShapeType = ref('')

	let newPrimitivesData = ref({
		parameter_a: '-',
		parameter_b: '-',
		parameter_c: '-',
		parameter_d: '-',
		parameter_e: '-',
		parameter_f: '-',
		parameter_g: '-',
	})
	let newNozzleData = ref({
		nozzle_name: '',
		nozzle_npd: '',
		nozzle_unit: '',
		nozzle_rating: '',
		nozzle_standard: '',
		nozzle_preparation: '',
		nozzle_location: '',
		parameter_6: '',
		parameter_7: '',
		parameter_8: '',
		parameter_9: '',
		parameter_10: '',
		parameter_11: '',
	})

	/* 定义函数内容 */

	// 新建基本体
	function createShape(shapeType) {
		newPrimitivesData.value = {
		parameter_a: '-',
		parameter_b: '-',
		parameter_c: '-',
		parameter_d: '-',
		parameter_e: '-',
		parameter_f: '-',
		parameter_g: '-',
	}
		createShapeType.value = shapeType.name //筒体
		dialogParaLabels.value = shapeType.labels

		// 根据配置文件，将基本体数据的 '-' 替换为 ''
		for (const key in shapeType.shapeRequireParams) {
			newPrimitivesData.value[key] = shapeType.shapeRequireParams[key]
		}
		
		newPrimitivesData.value['shape_index'] = store.primitivesDataStore.length + 1
		newPrimitivesData.value['shape_type'] = shapeType.name

		checkList.value = []
		if(newPrimitivesData.value.is_painted === "true"){
			checkList.value.push('保温/涂漆')
		}
		if(newPrimitivesData.value.is_fireproof === "true"){
			checkList.value.push('防火')
		}

		
		
		shapeDialogVisible.value = true
	}

	let equipInfo = ref({})
	watch(
		props,
		() => {
			equipInfo.value = reactive(JSON.parse(sessionStorage.getItem(props.equip_oid)))
		},
		{immediate: true}
	)

	let showTool = ref(false)
	watch(
		() => store.activeNameStore,
		() => {
			showTool.value = false
			setTimeout(() => {
				if (store.activeNameStore == '基本体' || store.activeNameStore == '管口') {
					showTool.value = true
				} else {
					showTool.value = false
				}
			}, 300)
		},
		{immediate:true}
	)

	watch(
		() => store.newPrimitivesDataStoreMessage,
		() => {
			if (store.newPrimitivesDataStoreMessage) {
				shapeDialogVisible.value = false
			}
		}
	)

	watch(
		() => store.newNozzleDataStoreMessage,
		() => {
			if (store.newNozzleDataStoreMessage) {
				nozzleDialogVisible.value = false
				newNozzleData.value = {
					nozzle_name: '',
					nozzle_npd: '',
					nozzle_unit: '',
					nozzle_rating: '',
					nozzle_standard: '',
					nozzle_preparation: '',
					nozzle_location: '',
					parameter_6: '',
					parameter_7: '',
					parameter_8: '',
					parameter_9: '',
					parameter_10: '',
					parameter_11: '',
				}
			}
		}
	)
</script>

<style scoped>
	.position_ab {
		z-index: 999;
		/* position: absolute; */
		right: 10px;
		top: 10px;
	}
	.toolBar-container {
		width: 50px;
	}

	.toolBar {
		padding: 10px 0;
		list-style-type: none;
	}

	.toolBar li {
		width: 36px;
		height: 36px;
		margin: 4px auto;
		border: 1px solid #ddd;
	}

	.toolBar li:hover {
		cursor: pointer;
	}
	.button_footer {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		width: 100%;
	}
</style>
